<template>
  <el-card class="box-card">
    <div>权限管理</div>
    <el-table :data="tableData" style="width: 100%">
      <!-- <el-table-column prop="date" label="日期" width="150"> </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
        </el-table-column>
      </el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column :prop="item.props" :label="item.label" align="center"  v-for="item in tableName" :key="item.label">
          <template v-if="item.children">
            <el-table-column
              v-for="item2 in item.children"
              :prop="item2.props"
              :label="item2.label"
              :key="item2.label"
              align="center"
            >
              <template v-if="item2.children">
                <el-table-column
                  v-for="item3 in item2.children"
                  :prop="item3.props"
                  :label="item3.label"
                  :key="item3.label"
                  align="center"
                >
                </el-table-column>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
    </el-table>
  </el-card>
</template>

<script  lang="ts">
import { defineComponent, reactive, toRefs, ref, h } from "vue";

export default {
  name: "role",
  setup() {
    const state = reactive({
      // tableData: [
      //   {
      //     date: "2016-05-03",
      //     name: "王小虎",
      //     province: "上海",
      //     city: "普陀区",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //     zip: 200333,
      //   },
      //   {
      //     date: "2016-05-02",
      //     name: "王小虎",
      //     province: "上海",
      //     city: "普陀区",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //     zip: 200333,
      //   },
      //   {
      //     date: "2016-05-04",
      //     name: "王小虎",
      //     province: "上海",
      //     city: "普陀区",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //     zip: 200333,
      //   },
      //   {
      //     date: "2016-05-01",
      //     name: "王小虎",
      //     province: "上海",
      //     city: "普陀区",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //     zip: 200333,
      //   },
      //   {
      //     date: "2016-05-08",
      //     name: "王小虎",
      //     province: "上海",
      //     city: "普陀区",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //     zip: 200333,
      //   },
      //   {
      //     date: "2016-05-06",
      //     name: "王小虎",
      //     province: "上海",
      //     city: "普陀区",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //     zip: 200333,
      //   },
      //   {
      //     date: "2016-05-07",
      //     name: "王小虎",
      //     province: "上海",
      //     city: "普陀区",
      //     address: "上海市普陀区金沙江路 1518 弄",
      //     zip: 200333,
      //   },
      // ],



      tableData: [
        {
          // employees_name: "angelica",
          // employees_responsibilities: "null",
          // subordinate_companies: "工程公司",
          // project_id_01: "2021002",
          // project_name_02: "生活垃圾焚烧飞灰中的重金属研究",
          // project_name_01: "江苏省土壤地下水污染协同治理技术研究及工程示范",
          employees_category: "正式",
          // project_id_02: "2021003",
          // employees_id: "2020002",
          project_no_02: "JSEP-SC-2021-0002-RE",
          // project_no_01: "JSEP-SC-2021-0001-RE",
        },
      ],
      tableName: [
        {
          label: "主体公司",
          props: "subordinate_companies",
        },
        {
          children: [
            {
              label: "人员编号",
              props: "employees_id",
            },
            {
              label: "人员性质",
              props: "employees_category",
            },
            {
              label: "姓名",
              props: "employees_name",
            },
            {
              label: "职责",
              props: "employees_responsibilities",
            },
          ],
          label: "人员情况",
        },
        {
          children: [
            {
              children: [
                {
                  label: "JSEP-SC-2021-0001-RE",
                  props: "project_no_02",
                },
              ],
              label: "江苏省土壤地下水污染协同",
            },
            {
              children: [
                {
                  label: "JSEP-SC-2021-0002-RE",
                  props: "JSEP-SC-2021-0002-RE",
                },
              ],
              label: "生活垃圾焚烧飞灰中的氯盐",
            },
            {
              children: [
                {
                  label: "JSEP-SC-2021-0003-RE",
                  props: "JSEP-SC-2021-0003-RE",
                },
              ],
              label: "江苏省生态环境科技管理体",
            },
            {
              children: [
                {
                  label: "JSEP-SC-2021-0004-RE",
                  props: "JSEP-SC-2021-0004-RE",
                },
              ],
              label: "基于大数据的流域排污许可",
            },
            {
              children: [
                {
                  label: "JSEP-SC-2021-0005-RE",
                  props: "JSEP-SC-2021-0005-RE",
                },
              ],
              label: "江苏省“新鱼米之乡”建设",
            },
          ],
          label: "参与项目情况",
        },
        {
          label: "备注",
          props: "remark",
        },
      ],


      // tableName: [
      //   {
      //     label: "日期",
      //     props: "date",
      //   },
      //   {
      //     label: "配送信息",
      //     children: [
      //       {
      //         label: "姓名",
      //         props: "name",
      //       },
      //       {
      //         label: "地址",
      //         children: [
      //           {
      //             label: "省份",
      //             props: "province",
      //           },
      //           {
      //             label: "市区",
      //             props: "city",
      //           },
      //           {
      //             label: "地址",
      //             props: "address",
      //           },
      //           {
      //             label: "邮编",
      //             props: "zip",
      //           },
      //         ],
      //       },
      //     ],
      //   },
      // ],
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style>
</style>